/*
 * @Author: Eureka 
 * @Date: 2022-01-19 11:46:56 
 * @Last Modified by: Eureka
 * @Last Modified time: 2022-01-21 11:44:57
 */

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:senkoo_platform/Utils/base_standard.dart';
import 'package:senkoo_platform/Utils/base_text.dart';
import 'package:senkoo_platform/Utils/set_edge_insets.dart';
import 'package:senkoo_platform/base_image/image_utils.dart';
import 'package:senkoo_platform/base_router/base_router_util.dart';
import 'package:senkoo_platform/views/login_modular/login_text_field.dart';
import 'package:senkoo_platform/views/main_modular/main_page.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({
    super.key,
  });

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  bool isClick = false;

  final FocusNode _nodeText1 = FocusNode();
  final FocusNode _nodeText2 = FocusNode();

  TextEditingController? _nameController;
  TextEditingController? _passwordController;

  @override
  void initState() {
    _nameController = TextEditingController();
    _passwordController = TextEditingController();
    _nameController!.addListener(_verify);
    _passwordController!.addListener(_verify);

    super.initState();
  }

  @override
  void dispose() {
    _nameController!.dispose();
    _passwordController!.dispose();
    super.dispose();
  }

  void _verify() {
    if (_nameController!.text.isNotEmpty &&
        _passwordController!.text.isNotEmpty) {
      setState(() {
        isClick = true;
      });
    } else {
      setState(() {
        isClick = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) => AnnotatedRegion(
        sized: false,
        value: SystemUiOverlayStyle.dark,
        child: Scaffold(
          body: bodyWidget(),
        ),
      );

  Widget bodyWidget() => Container(
        height: ScreenUtil().screenHeight,
        width: ScreenUtil().screenWidth,
        decoration: BoxDecoration(
            image: DecorationImage(
                image: ImageUtils.getAssetImage("bg_login"),
                fit: BoxFit.cover)),
        child: Stack(
          children: [
            Positioned(
                top: 36.h,
                left: 40.w,
                child: Container(
                  width: 166.w,
                  height: 50.h,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                    image: ImageUtils.getAssetImage("hdl_logo_name"),
                  )),
                )),
            Positioned(
                child: Padding(
              padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).viewInsets.bottom),
              child: Center(
                child: SizedBox(
                  width: 500.w,
                  height: 546.h,
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Positioned(
                        bottom: 0,
                        child: Container(
                          width: 500.w,
                          height: 479.h,
                          decoration: BoxDecoration(
                              color: Standard.colorFFFFFF,
                              borderRadius: BorderRadius.circular(24.r),
                              boxShadow: const [
                                BoxShadow(
                                    blurRadius: 40,
                                    spreadRadius: 0,
                                    offset: Offset(0, 0),
                                    color: Color(0x26000000)),
                              ]),
                          child: Column(
                            children: [
                              Container(
                                margin: setEdgeInsets(top: 113.h),
                                child: text(
                                    textString: '欢迎登录海底捞交互管理平台!',
                                    textSize: 14.sp,
                                    textColor: Standard.color666666),
                              ),
                              Container(
                                margin: setEdgeInsets(top: 46),
                                width: 297.w,
                                height: 42.h,
                                child: LoginTextField(
                                  key: const Key('userLoginName'),
                                  focusNode: _nodeText1,
                                  controller: _nameController!,
                                  maxLength: 11,
                                  hintText: "登录名或店号",
                                ),
                              ),
                              Container(
                                margin: setEdgeInsets(top: 24),
                                width: 297.w,
                                height: 42.h,
                                child: LoginTextField(
                                  key: const Key('password'),
                                  keyName: 'password',
                                  focusNode: _nodeText2,
                                  isInputPwd: true,
                                  controller: _passwordController!,
                                  maxLength: 16,
                                  hintText: "请输入密码",
                                ),
                              ),
                              Container(
                                width: 297.w,
                                height: 42.h,
                                margin: setEdgeInsets(top: 60),
                                child: LoginButton(
                                  key: const Key('login'),
                                  onPressed: isClick ? _login : null,
                                  textString: "登录",
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                      Positioned(
                          top: 0,
                          child: Container(
                            width: 150.w,
                            height: 150.w,
                            decoration: BoxDecoration(
                                color: Standard.colorFFFFFF,
                                borderRadius: BorderRadius.circular(150.r),
                                boxShadow: const [
                                  BoxShadow(
                                      blurRadius: 14,
                                      spreadRadius: 0,
                                      offset: Offset(0, 0),
                                      color: Color(0x33ED0000)),
                                ]),
                            child: Center(
                              child: Container(
                                width: 120.w,
                                height: 120.w,
                                decoration: BoxDecoration(
                                    image: DecorationImage(
                                  image: ImageUtils.getAssetImage("hdl_logo"),
                                )),
                              ),
                            ),
                          ))
                    ],
                  ),
                ),
              ),
            ))
          ],
        ),
      );

  Future<void> _login() async {
    RouterUtil.pushRemovePage(context, const MainPage());
  }
}

class LoginButton extends StatelessWidget {
  const LoginButton({
    super.key,
    this.textString = "",
    this.onPressed,
  });

  final String textString;
  final VoidCallback? onPressed;

  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      shape: RoundedRectangleBorder(borderRadius: Standard.baseBorderRadius4),
      disabledColor: onPressed == null
          ? Standard.colorD90B1D.withOpacity(.5)
          : Standard.colorD90B1D,
      color: onPressed == null
          ? Standard.colorD90B1D.withOpacity(.5)
          : Standard.colorD90B1D,
      animationDuration: const Duration(seconds: 0),
      onPressed: onPressed,
      elevation: 0,
      child: Padding(
        padding: setSymEdgeInsets(vertical: 11),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            text(
                textString: textString,
                textColor: Standard.colorFFFFFF,
                textSize: 14.sp,
                textWeight: semibold)
          ],
        ),
      ),
    );
  }
}
